<template>
	<view>
		<view class="msg-data" :msg="msg" :change:msg="renderScript.receiveMsg">
			{{msg}}
		</view>
		<button class="operate-btn" @click="renderScript.emitData">直接调用renderjs中的emitData的方法</button>
		<button class="operate-btn" @click="changeMsg">改变msg的值,直接调用renderjs中receiveMsg的值</button>
		<button class="operate-btn" @click="renderScript.renferMsg">通过renderjs改变msg的值,同时调用renderjs中的emitData的方法</button>
	</view>
</template>

<!-- renderjs 使用 demo -->
<!-- renderjs 它只支持app-vue和web -->
<script>
	export default {
		data() {
			return {
				msg: '我是service层原来的msg',
			};
		},
		methods: {
			// 触发逻辑层出入renderjs数据改变
			changeMsg() {
				this.msg = "msg值改变了";
			},
			// 接收renderjs发回的数据
			receiveRenderData(val) {
				console.log('renderjs返回的值-->', val);
			},
			//接收renderjs发回的数据,同时触发:change:msg,调用renderjs中的emitData的方法
			serviceClick(e) {
				this.msg = e
			}
		}
	};
</script>

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				name: '我是renderjs数据'
			}
		},
		methods: {
			renferMsg(event, ownerInstance) {
				// 调用 service层的serviceClick方法,传值
				console.log(event, ownerInstance)
				ownerInstance.callMethod('serviceClick', {
					test: '这是点击renderjs的区域，向service层传递变量'
				})
			},
			// 接收逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				console.log('msg变化了newValue', newValue)
				console.log('msg变化了oldValue', oldValue)
				console.log('msg变化了ownerVm', ownerVm)
				console.log('msg变化了vm', vm)
			},
			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				ownerVm.callMethod('receiveRenderData', this.name)
			}
		}
	};
</script>

<style>
	.msg-data {
		margin: 30rpx;
	}
	.operate-btn {
		margin: 30rpx;
	}
</style>